<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 方法1: -->
        <!-- <p>{{msg.substr(4,2)}}</p> -->
        <!-- 方法2: -->
        <!-- <p>{{mysubstr()}}</p> -->
        <!-- 案例处理字母 -->
        <!-- 方法1: 直接在模板中处理  缺点:变的模板臃肿 -->
        <!-- <p>
            模板:
            {{code.substring(0,code.indexOf('d'))+code[code.indexOf('d')].toUpperCase()+code.substr(code.indexOf('d')+1)}}
        </p> -->
        <!--方法2: 使用函数的方式处理:  -->
        <p>methods: {{mycodestring()}}</p>
        <p>methods: {{mycodestring()}}</p>
        <!-- 方法3: 使用计算属性实现 -->
        <p>computed: {{getUpperStr}}</p>
        <p>computed: {{getUpperStr}}</p>
        <input type="text" v-model="code">
    </div>
</body>

</html>
<script>
    // 计算属性
    // 计算属性特点1: 必须有返回值, 如果没有返回值,则该计算属性的值为undefined
    // 语法结构是一个函数形式, 返回 使用时是按照属性的形式书写的

    // 计算属性特点2: 计算属性会根据当前依赖的值, 而发生变化, 当依赖的值发生变化, 计算属性会重新计算,重新执行

    // 计算属性特点3: 计算属性有缓存,而methods 方法没有缓存, 当计算属性依赖的值没有发生变化, 计算属性使用上一次缓存的值
    // 而函数没有缓存, 每次都会重新执行

    // 总结: 计算属性说白了就是根据data 中的值,创建一个新的值, 并且可以保证实时更新,并且有缓存,提高性能
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                msg: '我想成为千锋第一个毕业的大神',
                code: 'abcdefg',
                // getUpperStr: 100
            }
        },
        methods: {
            mysubstr() {
                return this.msg.substr(4, 2)
            },
            // 定义的方法
            mycodestring() {
                console.log('methods');
                return this.code.substring(0, this.code.indexOf('d')) + this.code[this.code.indexOf('d')].toUpperCase() + this.code.substr(this.code.indexOf('d') + 1)
            }
        },
        directives: {},
        computed: { // 存放所有的计算属性的对象
            // 第一个计算属性
            getUpperStr() {
                console.log('computed');
                return this.code.substring(0, this.code.indexOf('d')) + this.code[this.code.indexOf('d')].toUpperCase() + this.code.substr(this.code.indexOf('d') + 1)
            }
        }
    }).mount('#app')


</script>